<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/admin/adminHeader::html('产品管理')">
</head>
<body>

<div th:replace="include/admin/adminNavigator::html"></div>
<script>
    $(function () {
        var pid = getUrlParms("pid");
        var data4Vue={
            uri:'productImages',
            singleProductImages:[],
            detailProductImages:[],
            product:'',
            category:'',
            singleFile:'',
            detailFile:''
        };

        var vue = new Vue({
            el:"#workingArea",
            data:data4Vue,
            mounted:function () {
                this.listSingles();
                this.listDetails();
                this.getProduct(pid);
            },
            methods:{
                getProduct:function(pid){
                    var url = "products/"+pid;
                    axios.get(url).then(function (response) {
                        vue.product= response.data;
                        console.log(vue.product);
                        vue.category = response.data.category;
                        console.log(vue.category);
                    })

                },
                listSingles:function(){
                    var url = "products/"+pid+"/"+this.uri+"?type=single";
                    axios.get(url).then(function (response) {
                        vue.singleProductImages = response.data;
                        console.log(vue.singleProductImages );
                    });
                },
                listDetails:function () {
                    var url = "products/"+pid+"/"+this.uri+"?type=detail";
                    axios.get(url).then(function (response) {
                        vue.detailProductImages = response.data;
                        console.log(vue.detailProductImages );
                    })
                },
                addSingle:function () {
                    if(!checkEmpty(this.singleFile,"单个产品图片")){
                        return;
                    }
                    var url = this.uri + "?type=single&pid="+pid;

                    var formData = new FormData();
                    formData.append("image",this.singleFile);

                    axios.post(url,formData).then(function (response) {
                        vue.listSingles();
                        $("#singlePic").val('');
                        vue.singleFile = '';
                    })
                },
                addDetail:function () {
                    if(!checkEmpty(this.detailFile,"详情产品图片")){
                        return;
                    }
                    var url = this.uri + "?type=detail&pid="+pid;

                    var formData = new FormData();
                    formData.append("image",this.detailFile);
                    axios.post(url,formData).then(function (response) {
                        vue.listDetails();
                        $("#detailPic").val('');
                        vue.detailFile = '';
                    })
                },
                deleteBean:function(id){
                    if(!checkDeleteLink()){
                        return;
                    }

                    var url = this.uri + "/"+id;
                    axios.delete(url).then(function (response) {
                        vue.listSingles();
                        vue.listDetails();
                    })
                },
                getSingleFile:function (event) {
                    this.singleFile = event.target.files[0];
                },
                getDetailFile:function(event){
                    this.detailFile = event.target.files[0];
                }
            }
        })
    })
</script>

<div id="workingArea">
    <ol class="breadcrumb">
        <li>
            <a href="admin_category_list">所有分类</a>
        </li>
        <li>
            <a :href="'admin_product_list?cid='+category.id">
                {{category.name}}
            </a>
        </li>
        <li class="active">{{product.name}}</li>
        <li class="active">产品图片管理</li>
    </ol>

    <table class="addPictureTable" align="center">
        <tr>
            <td class="addPictureTableTD">
                <div>
                    <div class="panel panel-warning addPictureDiv">
                        <div class="panel-heading">新增产品<b class="text-primary">单
                            个</b>图片</div>
                        <div class="panel-body">
                            <table class="addTable">
                                <tr>
                                    <td>
                                        请选择本地图片 尺寸400*400 为佳
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input id="singlePic" type="file" accept="image/*"
                                               @change="getSingleFile($event)" name="image">
                                    </td>
                                </tr>
                                <tr class="submitTR">
                                    <td align="center">
                                        <button type="submit" @click="addSingle"
                                                class="btn btn-success">提 交</button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <table class="table table-striped table-bordered table-hover
table-condensed">
                        <thead>
                        <tr class="success">
                            <th>ID</th>
                            <th>产品单个图片缩略图</th>
                            <th>删除</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="pi in singleProductImages">
                            <td>{{pi.id}}</td>
                            <td>
                                <a title="点击查看原图"  target="_blank"
                                   :href="'img/productSingle/'+pi.id+'.jpg'">
                                    <img height="50px"
                                         :src="'img/productSingle/'+pi.id+'.jpg'">
                                </a>
                            </td>
                            <td>
                                <a href="#nowhere" @click="deleteBean(pi.id)">
                                    <span class="glyphicon glyphicon-trash"></span>
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </td>

            <td class="addPictureTableTD">
                <div>
                    <div class="panel panel-warning addPictureDiv">
                        <div class="panel-heading">新增产品<b class="text-primary">详
                            情</b>图片</div>
                        <div class="panel-body">
                            <table class="addTable">
                                <tr>
                                    <td>请选择本地图标片 宽度790 为佳</td>
                                </tr>
                                <tr>
                                    <td>
                                        <input id="detailPic" type="file" accept="image/*"
                                               @change="getDetailFile($event)" name="image">
                                    </td>
                                </tr>
                                <tr class="submitTR">
                                    <td align="center">
                                        <button type="submit" @click="addDetail"
                                                class="btn btn-success">提交</button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <table class="table table-striped table-bordered table-hover
table-condensed">
                        <thead>
                        <tr class="success">
                            <th>ID</th>
                            <th>产品详情图片缩略图</th>
                            <th>删除</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="pi in detailProductImages">
                            <td>{{pi.id}}</td>
                            <td>
                                <a title="点击查看原图"  target="_blank"
                                   :href="'img/productDetail/'+pi.id+'.jpg'">
                                    <img height="50px"
                                         :src="'img/productDetail/'+pi.id+'.jpg'">
                                </a>
                            </td>
                            <td>
                                <a href="#nowhere" @click="deleteBean(pi.id)">
                                    <span class="glyphicon glyphicon-trash"></span>
                                </a>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>

<div th:replace="include/admin/adminFooter::html"></div>



</body>
</html>